<template>
    <div class="app-container">
        <el-row>
            <el-input placeholder="请输入电话号码" v-model="phone"></el-input>
            <el-button type="primary" @click="sendMsgHandle">发送</el-button>
        </el-row>
        <el-table v-loading="listLoading" element-loading-text="正在载入数据..." :data="dataList" style="width: 100%;" border class="data-list">
            <el-table-column label="选择" align="center" width="50">
                <template slot-scope="scope">
                   <el-radio v-model="selectedSend" ref="radio" :label="scope.row.eventId" name="message" class="message-radio"></el-radio>
                </template>
            </el-table-column>
            <el-table-column label="序号" align="center" type="index" :index="indexMethod" width="50">

            </el-table-column>
            <el-table-column label="模板" align="left">
                <template slot-scope="scope">
                    <span v-html="scope.row.smsParams"></span>
                </template>
            </el-table-column>
        </el-table>
        <!-- <pagination v-show="total>0" :total="total" :page.sync="searchData.currPage" :limit.sync="searchData.perItems" @pagination="fetchData" /> -->
    </div>
</template>
<script>
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },

  props: ['shopId'],

  data () {
    return {
      phone: '',
      selectedSend: '',
      name: '',
      listLoading: false,
      dataList: [],
      inputData: '',
      shopData: '',
      total: ''
    }
  },

  created () {
    var self = this
    self.fetchData()
  },

  mounted () {
    this.$nextTick(function () {
    })
  },

  methods: {
    replaceStringToInput (string) {
      let reg = /({[^{]*})/g
      let matchStringArr = string.match(reg)
      for (let i in matchStringArr) {
        let matchString = matchStringArr[i]
        if (string.indexOf(matchString) > -1) {
          let name = matchString.substring(1, matchString.length - 1)
          string = string.replace(matchString, '<input type="text" autocomplete="off" value="" placeholder="请输入" ref=' + name + ' name=' + name + ' class="el-input__inner params-input">')
        }
      }
      return string
    },

    // 根据token 请求数据，判断用户信息是否有效
    fetchData () {
      let self = this
      self.$axios.post(API_ROOT.url + '/openSmsMessage/querySmsTemples').then(res => {
        if (res.status && res.status === 1103) {
          console.log(res.result.error_description)
        } else {
          if (res.status) {
            self.dataList = res.data.data.templates
            self.shopData = res.data.data.shop
            self.selectedSend = self.dataList[0].eventId
            self.sendShopData()
            self.dataList.map(item => {
              item.smsParams = self.replaceStringToInput(item.smsParams)
            })
          } else {
            self.$message.error(res.message)
            location.href = '/message/sso/authorize'
          }
        }
      }).catch(err => {
        self.$message.error('请求失败，请稍后再试！')
      })
    },

    sendShopData () {
      var self = this
      self.$emit('getShopData', self.shopData)
    },

    indexMethod (idx) {
      return idx + 1
    },

    sendMsgHandle () {
      let self = this
      let $choosed = $('.data-list').find('input[type="radio"]:checked'),
        $choosedTr = $choosed.closest('tr'),
        $name = $choosedTr.find('input[name="name"]'),
        $content = $choosedTr.find('input[name="content"]'),
        phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/

      if (!self.phone) {
        self.$alert('请填写电话号码！')
        return
      }

      if (!(phoneReg.test(self.phone))) {
        self.$alert('请输入正确的11位手机号！')
        return
      }

      if ($name && $name.length) {
        self.name = $name.val()
        if (!self.name) {
          self.$alert('资料尚未填写完毕！')
          return
        }
      }

      if ($content && $content.length) {
        self.content = $content.val()
        if (!self.content) {
          self.$alert('资料尚未填写完毕！')
          return
        }
      }

      let data = {
        'phone': self.phone,
        'content': self.content,
        'name': self.name,
        'shopId': self.shopId,
        'eventId': self.selectedSend
      }

      self.$axios.post(API_ROOT.url + '/openSmsMessage/sendMovekSms', data).then(res => {
        if (res.status) {
          self.$alert('短信已经成功发送')
        } else {
          self.$alert('发送短信出错：' + res.message)
        }
      }).catch(err => {
        self.$message.error('请求失败，请稍后再试！')
      })
    }
  }
}
</script>
